<template>

  <div>
    <el-carousel style="height: 600px">
      <el-carousel-item v-for="(item, index) in images" :key="index" style="height: 600px">
        <el-image 
          style="width: 100%; height: 100%" 
          :src="item.url" 
        />
      </el-carousel-item>
    </el-carousel>
  </div>
<div class="home">
  <div class="content-font">
    <span class="content-font1">大标题</span>
<span class="content-font2">小标题</span>
<el-button color="#626aef" :dark="isDark" plain class="content-btn">了解更多</el-button>
  </div>
  <div class="content-image">
    <el-image src="/image/home-top.jpg" />
  </div>
</div>
<div class="home">
  <div class="content-image">
    <el-image src="/image/home-top.jpg" />
  </div>
  <div class="content-font">
    <span class="content-font1">大标题</span>
<span class="content-font2">小标题</span>
<el-button color="#626aef" :dark="isDark" plain class="content-btn">了解更多</el-button>
  </div>
  
</div>
<div class="home">
  <div class="content-font">
    <span class="content-font1">大标题</span>
<span class="content-font2">小标题</span>
<el-button color="#626aef" :dark="isDark" plain class="content-btn">了解更多</el-button>
  </div>
  <div class="content-image">
    <el-image src="/image/home-top.jpg" />
  </div>
</div>
<div class="home">
  <div class="content-image">
    <el-image src="/image/home-top.jpg" />
  </div>
  <div class="content-font">
    <span class="content-font1">大标题</span>
<span class="content-font2">小标题</span>
<el-button color="#626aef" :dark="isDark" plain class="content-btn">了解更多</el-button>
  </div>
  
</div>
<div class="home">
  <div class="content-font">
    <span class="content-font1">大标题</span>
<span class="content-font2">小标题</span>
<el-button color="#626aef" :dark="isDark" plain class="content-btn">了解更多</el-button>
  </div>
  <div class="content-image">
    <el-image src="/image/home-top.jpg" />
  </div>
</div>
<div class="home-7">
  <div class="home-7-font">
    <span>学习</span>
<span style="font-weight: 700; font-size: 100px; margin-left: 10px">7</span>
<span>大难题</span></div>
<div class="btn">
  <el-button type="primary" class="btn1">备考没方向</el-button>
  <el-button type="primary" class="btn2">时间不够用</el-button>
  <el-button type="primary" class="btn3">学习不自律</el-button>
  <el-button type="primary" class="btn4">进度难把握</el-button>
  <el-button type="primary" class="btn5">资料太复杂</el-button>
  <el-button type="primary" class="btn6">教材看不懂</el-button>
  <el-button type="primary" class="btn7">题库刷不完</el-button>
  </div>
</div>

</template>

<script>

export default {
data() {
    return {
      images: [
        { url: "/image/home-top.jpg" },
        { url: "/image/home-top.jpg" },
        { url: "/image/home-top.jpg" },
        { url: "/image/home-top.jpg" }
      ]
    }
  }
}
</script>

<style scoped>

.home {
  margin-top: 3%;
  margin-left: 10%;
  width: 80vw;
  height: 54vh;
  background: #E8E8E8;
}
.content-font {
  float: left;
  width: 35vw;
  height: 54vh;
  background: #E8E8E8;
}
.content-image {
  float: left;
width: 43vw;
  height: 54vh;

}
.content-image .el-image{
  float: left;
width: 43vw;
  height: 54vh;

}
.home-7 {
  margin-top: 3%;
  margin-left: 10%;
  width: 80vw;
  height: 80vh;
  /* background: #E8E8E8; */
  color: #194CBE;
  font-size: 50px;
  
}

.home-7-font {
 text-align: center;
 padding-top: 4%;
 
}
/* .home-7-font span {
  margin-top: 15%;
  } */

.btn .el-button {
  background: #194CBE;
  margin-left: 22%;
  width: 13vw;
  height: 8vh;
  }

.content-font1{
  margin-left: 12%;
   margin-top: 12%;  
  display: inline-block; 
  font-size: 40px;
  /* font-weight: 550;s */
}
.content-font2{
  margin-left: 12%;
   margin-top: 3%;  
  display: block; 
  font-size: 20px;
  /* font-weight: 550;s */
}

.content-btn {
  margin-left: 35%;
   margin-top: 23%; 
   width: 10vw;
   height: 5vh;
}

</style>